<template>
  <div>
    <el-card class="box-card card-toubu">
      <div class="text item">
        <i class="el-icon-s-unfold"></i>&nbsp;
        <span>退货原因</span>
        <el-button style="float: right;" size="mini" @click="handleadd()">添加</el-button>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="cause" label="原因类型" width="420"></el-table-column>
      <el-table-column prop="seq" label="排序" width="280"></el-table-column>
      <el-table-column label="是否启用" width="260">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            @change="kaiguan(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button @click="updateCause(scope.row.id)" size="mini">编辑</el-button>
          <el-button @click="deleteCause(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="24" style="margin-top: 10px;">
      <el-col :span="12">
        <el-button @click="batchDelete()">批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- 对话框 -->
    <el-dialog :title="activeName" :visible.sync="dialogFormVisible" @close="dialogClose">
      <el-form :model="causeInfo">
        <el-form-item label="原因类型" :label-width="formLabelWidth">
          <el-input v-model="causeInfo.cause" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="causeInfo.seq" auto-complete="off" type="number" min="0"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-switch
            v-model="causeInfo.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [],
      currentPage4: 1,
      size: 10,
      page: 1,
      total: 0,
      activeName: "添加",
      dialogFormVisible: false,
      causeInfo: {
        id: "",
        cause: "",
        seq: "",
        status: "0"
      },
      formLabelWidth: "120px",
      multipleSelection: ""
    };
  },
  created () {
    this.getCauseList();
  },
  methods: {
    // 获取信息
    async getCauseList () {
      const { data: res } = await this.$http.get(
        `vi/order/return/cause/listPages/${this.page}/${this.size}`
      );
      this.tableData = res.data.pageUtils.rows;
      this.total = res.data.pageUtils.total;
    },
    handleadd () {
      this.activeName = "添加";
      this.dialogFormVisible = true;
    },
    // 修改
    async updateCause (id) {
      const { data: res } = await this.$http.get(
        `vi/order/return/cause/detail/${id}`
      );
      this.causeInfo = res.data.tbReturnCause;
      this.dialogFormVisible = true;
      this.activeName = "修改";
    },
    // 删除
    deleteCause (id) {
      this.$confirm("此操作将任务状态改为删除状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 点击确定的操作(调用接口)
          const { data: res } = await this.$http.delete(
            `vi/order/return/cause/delete/${id}`
          );
          // 提示信息
          this.$message({
            type: "success",
            message: res.message
          });
          this.getCauseList();
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    handleSizeChange (val) {
      this.size = val;
      this.getCauseList();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getCauseList();
    },
    dialogClose () {
      // 重置causeInfo数据
      Object.assign(this.$data.causeInfo, this.$options.data().causeInfo);
    },
    save () {
      if (this.causeInfo.id === "") {
        this.add();
      } else {
        this.update();
      }
    },
    async add () {
      const { data: res } = await this.$http.post(
        "vi/order/return/cause/add",
        this.causeInfo
      );
      this.dialogFormVisible = false;

      // 提示信息
      this.$message({
        type: "success",
        message: res.message
      });
      this.getCauseList();
    },
    async update () {
      const { data: res } = await this.$http.put(
        "vi/order/return/cause/update",
        this.causeInfo
      );
      this.dialogFormVisible = false;
      // 提示信息
      this.$message({
        type: "success",
        message: res.message
      });
      this.getCauseList();
    },
    // 开关改变
    kaiguan (row) {
      this.causeInfo = row;
      this.update();
    },
    // 批量删除
    async batchDelete () {
      if (this.multipleSelection.length === 0) {
        // 提示信息
        this.$message({
          type: "info",
          message: "请选择要删除的项"
        });
        return;
      }

      this.$confirm("此操作将任务状态改为删除状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 点击确定的操作(调用接口)
          const { data: res } = await this.$http.delete(
            `vi/order/return/cause/batchDelete/${this.multipleSelection}`
          );
          // 提示信息
          this.$message({
            type: "success",
            message: res.message
          });
          this.getCauseList();
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    // 勾选改变事件
    handleSelectionChange (val) {
      this.multipleSelection = "";
      val.forEach(element => {
        this.multipleSelection = this.multipleSelection + element.id + ",";
      });
      this.multipleSelection = this.multipleSelection.substring(
        0,
        this.multipleSelection.length - 1
      );
    }
  }
};
</script>
<style scoped></style>
